<template>
	<div class="bank_account">
        <div class="return-bar" @click="back()">
            <i class="iconfont">&#xe668;</i>
            添加银行帐号
        </div>

		<div class="top">

			<div class="white_bg" style="padding:5px 0px;margin-bottom:5px">
				<group>
					<cell title="收款姓名:"  class="sp" :value="postData.realname"></cell>
				</group>

				<group>
					<x-input title="收款卡号:" :value.sync="postData.account" is-type="china-mobile" :show-clear=false placeholder="请输入收款卡号"  ></x-input>
				</group>


				<group>
					<x-input title="收款银行:" :value.sync="postData.bank"   placeholder="请输入收款银行"  ></x-input>
				</group>

				<group>
					<x-input title="开户地:" :value.sync="postData.open_area"    placeholder="请输入银行开户地"  ></x-input>
				</group>







				<group>
					<x-input title="分支行:" :value.sync="postData.branch"   placeholder="请输入银行分支行"  ></x-input>
				</group>

				<!-- <group>
					<x-input title="图形验证码:" is-type="china-mobile"   placeholder="请输入图形验证码"  ></x-input>
				</group> -->



				<group>
					<cell title="手机号:"  class="sp" :value="postData.phone"></cell>
				</group>

				<group>
					<cell title="图形验证码:"  class="sp"  >
						<x-input class="none" :value.sync="postData.verify" :max=4  is-type="china-mobile" show-clear=false   placeholder="请输入图形验证码!"   >
							<img class="verify" slot="right"  v-show="verify_img.show" src="{{verify_img.src}}"  @click="reloadImg" />
						</x-input>
					</cell>
				</group>


				<group>
					<cell title="手机验证码:"  class="sp"  >
						<x-input class="none" :value.sync="postData.phone_code"  :max=4  is-type="china-mobile" show-clear=false   placeholder="请输入手机验证码!"   >
							<a v-bind:class="timecls" slot="right"  @click="sendVCode()" > {{smsData.btnTxt }}</a>
						</x-input>
					</cell>
				</group>
			</div>

			<div class="btn_con">
				<input class="m_btn" value="提 交" type="button" @click="updateBankAccount" />
			</div>

		</div>

		<div class="notice">
			<h3>温馨提示： </h3>
			<p>1. 请认真填写银行卡信息，否则可能会造成您的奖励无法按时到账。 </p>
			<p>2. 上述银行卡号的开户人姓名必须为您实名认证的姓名，否则影响您奖励到账。</p>
		</div>

		<com-alert
		:show.sync="alertDialog.show"
		:title.sync="alertDialog.title"
		:buttontxt.sync="alertDialog.buttontxt"
		:content.sync="alertDialog.content"
		></com-alert>

	</div>


</template>

<script>
import {Group, Cell, XInput, XButton} from 'vux';
import api from '../../data/api';
import ComAlert from '../../components/common/alert'
import { mapGetters, mapActions } from 'vuex'

var time_work = null;

export default {
	//props:['show_loading', 'phone'],

    data(){
        return {
			canPost:true,
			busy:false,
            verify_img:{
                show:true,
                src:''
			},

			postData:{
				realname:'',
				account:'',
				bank:'',
				open_area:'',
				branch:'',
				//phone:'',
				phone_code:'',
				verify:''
			},

			timecls:'g_nob_btn',
			timer:10,

			smsData: {stop:false, disableBtn:false,btnTxt:"获取动态码",timer:0}
		}
	},

    computed: {
		...mapGetters(['alertDialog'])
	},

    components:{
        ComAlert,
        Group,
		Cell,
		XInput,
		XButton
	},

	methods: {
		...mapActions([
            'setAlertDialog'
		]),

		back(){
			this.$route.router.go('/user')
		},

	    updateSms(){
	        if(this.smsData.timer <= 0)
	        {
				this.stopTimeCount('重新发送');
				this.timecls='';
	        }else{
				this.timecls='gray';
	            this.smsData.timer--;
	            this.smsData.btnTxt = '剩余'+this.smsData.timer+'秒';
	        }
	    },

		stopTimeCount(str){
			clearInterval(time_work);
			this.smsData.timer  = 0;
			this.smsData.stop = false;
			this.smsData.disableBtn = false;
			this.smsData.btnTxt = str;
		},

	    startTimer () {
			clearInterval(time_work);
			if(this.smsData.timer == 0)	this.smsData.timer = 60;
	        if(this.smsData.stop == false)
	        {
				time_work = setInterval(this.updateSms,1000);
	        }
	        else
	        {
				clearInterval(time_work);
	        }
		},

		async getCode(){
			if(this.busy) return;
			this.busy = true;
			var rs = await api.user.send_phone_code({'verify':this.postData.verify, 'phone': this.postData.phone, 'type':'set_bank'});
			this.busy = false;
			if(!rs.status){
				this.reloadImg();
				this.postData.verify='';
				this.stopTimeCount('重新发送');
				this.timecls = 'g_nob_btn';
				this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:rs.msg})
			}
		},



		sendVCode(){
			if(this.postData.verify==''  || this.busy) {
				return false;
			}

			if(this.postData.phone == ''){
				this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:'请输入您的手机号！'})
				return false;
			}
			if(this.smsData.disableBtn) return;
			this.smsData.disableBtn = true, this.startTimer();
			this.getCode();
		},



		reloadImg(){
			this.verify_img.show = false;
			this.verify_img.src = '';
			var vm = this;
			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;
			var rkey = vm.global.r_key()
			var pkey = vm.global.p_key()
			setTimeout(function(){
			    vm.verify_img.show = true;
			    vm.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			},10);
		},

		async updateBankAccount(){


			 /* console.log(this.isChinese(this.postData.bank))
			 console.log(this.isChinese(this.postData.branch))
			 console.log(this.isChinese(this.postData.open_area))
			 return; */


			var that = this;
			for(var i in this.postData){
				console.log(i + ':' + this.postData[i]);
				if(this.postData[i] == '')
					this.canPost = false;
			}



			if(!this.canPost || this.busy){
				this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:'请认真填完所需资料,谢谢!'})
				this.canPost = true;
				return;
			}


			if(this.postData.account.length < 6 || this.postData.account.length > 20){
				this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:'请输入有效银行卡号!'})
				return;
			}


			if(this.isChinese(this.postData.account)){
				this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:'请输入有效银行卡号!'})
				return;
			}


			if(!this.isChinese(this.postData.bank) || !this.isChinese(this.postData.branch) || !this.isChinese(this.postData.open_area) ){
				this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:'收款银行/开户地/分支行请输入中文,谢谢!'})
				return;
			}


			this.busy = true, this.$store.dispatch('setShowLoading', true);
			var res = await api.user.add_bank_account(this.postData);
			this.busy = false, this.$store.dispatch('setShowLoading', false), this.canPost = true;

			this.setAlertDialog({show:true, title:'信息提示', buttontxt:'确定', content:res.msg})
			if(res.status){
				setTimeout(() => {
					that.$route.router.go('/user')
				}, 2000);
			}
		},

        //检测是否为中文，true表示是中文，false表示非中文

		isChinese(str){
			if(/.*[\u4e00-\u9fa5]+.*$/.test(str)){
				return true;
			}
			return false;
		},


		async init(){
			var that = this;
			var res = await api.user.info();
			if(!res.status){
				if(res.code == 10055){
					that.$route.router.go('/user')
					return;
				}
			}
			this.postData.realname = res.data.bank_AcName;
			this.postData.phone = res.data.phone;

			res = await api.user.profile();
			if(res.bankSet_status){
				this.postData.account = res.bankSet_account;
				this.postData.bank = res.bankSet_bank;
				this.postData.open_area = res.bankSet_open_area;
				this.postData.branch = res.bankSet_branch;
			}
		}
	},

	route:{
		activate(transition){
			transition.next();

            var timestamp = Date.parse(new Date());
            timestamp = timestamp / 1000;

            var rkey = this.global.r_key()
            var pkey = this.global.p_key()

            this.verify_img.src = api.user.verifyImg()+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;
			this.init();


        }
    }
}
</script>

<style lang="scss" >
.bank_account{
	.weui_cells:before{
		border-top:none;
	}

	.weui_label{
		width: 105px!important;
	}

	.sp{
		.weui_cell_primary{
			flex:0 0 102px;
		}
	}
	.weui_cell.none{
		padding:0px;
		.weui_cell_primary{
			flex:1;
		}
	}
}
</style>

<style lang="scss" scoped>
@import '../../assets/sass/_mixin.scss';


.notice{
	margin-top:20px;
	padding:0px 15px;
	padding-bottom:10px;
	font-size:13px;
	h3{
		color:$mainColor;
		font-weight:bold;
	}
}

.verify{
	height: 37px;
    margin: -20px -8px -12px 0px;
}

.white_bg{

    font-size:14px;
    background:#fff;
    .hl{
        color:$mainColor;
        font-size:20px;
    }
    a{
        padding:5px 8px;
        width:100%;
        display: inline-block;
        font-size:16px;
    }
}

.grey_bg{
    h3{
        color:$mainColor;
        font-size:16px;
    }
    padding:15px;
    color:#909090;
}

.btn_con{
	margin-top:20px;
	.m_btn{
		width: 90%;
		border: none;
		padding: 10px;
		margin: auto;
		display: block;
		font-size: 16px;
	}
}
</style>
